<template>
	<signer-page class="contract-box">
		<u-popup :show="data.show" mode="bottom">
			<view class="popup">
				<u-form :model="form.data" ref="formRef" :rules="form.rule" validate-trigger="bind">
					<view class="popup-title flex">
						<view class="cancle" @click="close"> 取消 </view>
						<view class="title">
							{{ data.type == 'member' ? '个人' : '企业' }}
						</view>
						<view class="sure" @click="form.submit()"> 确定 </view>
					</view>
					<view class="form-box">
						<u-form-item label="经办人姓名" prop="user_name" borderBottom labelWidth="100" class="" required
							@click="page.clearChange">
							<u--input v-model="form.data.user_name" border="none" placeholder="请输入经办人姓名"
								inputAlign="right" cursorSpacing="60"></u--input>
						</u-form-item>
						<u-form-item label="经办人手机号" prop="cellphone" borderBottom labelWidth="100" class="" required
							@click="page.clearChange">
							<u--input v-model="form.data.cellphone" border="none" placeholder="请输入经办人手机号" maxlength='11'
								type='number' inputAlign="right" cursorSpacing="60"></u--input>
						</u-form-item>
						<u-form-item label="经办人身份证号" prop="id_no" borderBottom labelWidth="120" class="" required
							@click="page.clearChange">
							<u--input v-model="form.data.id_no" border="none" placeholder="请输入经办人身份证号" maxlength='18'
								inputAlign="right" cursorSpacing="60"></u--input>
						</u-form-item>
						<u-form-item label="企业名称" prop="company_name" borderBottom labelWidth="100" class=""
							v-if="data.type=='user'" required @click="page.clearChange">
							<u--input v-model="form.data.company_name" border="none" placeholder="请输入企业名称"
								inputAlign="right" cursorSpacing="60"></u--input>
						</u-form-item>
					</view>
				</u-form>
			</view>
		</u-popup>
	</signer-page>
</template>
<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		defineEmits
	} from 'vue';
	import {
		signerList,
		userSignerList
	} from "../api/module/contract";
	import {
		personFormCheck,
		userFormCheck,
		transformSinger
	} from "../utils/contract/initiate";
  import {
    isObjectEmpty,
    mobileRegular,
    objClear,
    msg, phoneSecret, arrayGet
  } from "../utils/common";
	import {
		onShow
	} from "@dcloudio/uni-app";
	const formRef = ref(null);
	const emit = defineEmits(['return-signer']);
	const form = reactive({
		rule: ref({
			cellphone: [{
				required: true,
				message: '请输入手机号',
				trigger: 'blur'
			}, {
				pattern: mobileRegular,
				message: '手机号格式不正确',
				trigger: 'blur'
			}],
			user_name: [{
				required: true,
				message: '请输入真实姓名',
				trigger: 'blur'
			}, {
				min: 2,
				max: 20,
				message: '真实姓名长度为2-20个字符之间',
				trigger: 'blur'
			}, ],
			company_name: [{
				required: true,
				message: '请输入企业名称',
				trigger: 'blur'
			}, {
				min: 2,
				max: 200,
				message: '企业名称长度为2-200个字符之间',
				trigger: 'blur'
			}, ],
		}),
		data: ref({
			key_word: '',
			cellphone: '',
			user_name: '',
			company_name: '',
			id_no: '',
		}),
		submit: () => {
			formRef.value.setRules(form.rule);
			formRef.value.validate().then(validate => {
				if (!isObjectEmpty(form.data)) {
					return msg('请选择签署人');
				}
				console.log('选择的签署人信息', form.data);

        if (arrayGet(form,'data.cellphone_secret')) {
          form.data.cellphone_secret = phoneSecret(form.data.cellphone);
        }

        form.data['signer_user_type'] = data.type;
				switch (data.type) {
					case 'member':
						if (!personFormCheck(form.data)) {
							return false;
						}
						break;
					case 'user':
						if (!userFormCheck(form.data)) {
							return false;
						}
						break;
				}
				emit('return-signer', form.data);
				close();
				//清空数据，防止第二次打开数据继续存在
				form.data = ref({
					key_word: '',
					cellphone: '',
					user_name: '',
					company_name: '',
					id_no: '',
				})
			});
		},
	});
	const data = reactive({
		changeVal: null,
		userType: 1,
		show: ref(false),
		type: ref('member'),
		singerList: [],
	});
	const page = reactive({
		clearChange: function() {
			data.changeVal = null;
		},
	});
	const close = () => {
		data.show = false;
		data.singerList = [];
		form.data = objClear(form.data);
		page.clearChange();
	}
	const edit = (res, index) => {
		data.type = res.signer_user_type
		form.data = res
		data.show = true;
	}
	onShow(() => {});
	defineExpose({
		close,
		edit
	});
</script>
<style scoped lang="scss" src="/static/css/contract/initiate.scss"></style>